<template>
	<view class="LN">
		<h2 class="CRM">
			CRM
		</h2>
		<view class="gard">
			<ul id="ul">
				<li v-for="item in arr" :key="item.id" class="li" @click="too(item.path)">
					<view class="on">
						<img :src="item.img" alt="" class="tu"/>
					</view>
					<p class="un">{{item.name}}</p>
				</li>
			</ul>
		</view>
		<view class="hui">
			<view class="top">
				<p class="font">回款排名</p>
				<p class="shai" @click="shai()">筛选</p>
			</view>
			<view class="Udata">
				<ul class="uler">
					<li v-for="item in list" :key="item.id" class="lier">
						<p id="id">{{item.id}}</p>
						<p id="name" @click="go(item)">{{item.userName}}</p>
						<p id="bu">{{item.bu}}</p>
						<p id="price">{{item.price}}</p>
					</li>
					
				</ul>
			</view>
		</view>
		<view class="shu">
			<view class="top">
				<p class="font">数据简报</p>
				<p class="shai" @click="shaiX()">筛选</p>
			</view>
			<view class="uData">
				<ul class="Dyear">
					<li v-for="item in years" class="years">
						<p class="title">{{item.title}}</p>
						<p class="num">{{item.num}}</p>
					</li>
				</ul>
			</view>
		</view>
		
	</view>
	<view class="shuShai" v-show="huikuan">
		<view class="shuCon">
			<view class="shuTop">
				<h2 class="her">数据筛选</h2>
				<p @click="cuo()">❌</p>
			</view>
			<h2 class="fa">范围</h2>
			<ul class="fanwei">
				<li v-for="(item,index) in huiK" :key="item.id" :class="index===huiIndex?'acTive':'ffEr'" @click="gaiIndex(index)">{{item.name}}</li>
			</ul>
			<h2 class="fa">时间</h2>
			<ul class="fanwei">
				<li v-for="(item,index) in time" :key="item.id" :class="index===timeIndex?'acTive':'ffEr'" @click="gaiTIndex(index)">{{item.name}}</li>
			</ul>
			<view class="btnShu">
				<view class="shuCZ" @click="CZ()">
					重置
				</view>
				<view class="shuQD" @click="que()">
					确定
				</view>
			</view>
		</view>
	</view>
	<view class="shuShai" v-show="jianbao">
		<view class="shuCon">
			<view class="shuTop">
				<h2 class="her" >数据筛选</h2>
				<p @click="cuo()">❌</p>
			</view>
			<h2 class="fa">时间</h2>
			<ul class="fanwei">
				<li v-for="(item,index) in timer" :key="item.id" :class="index===timerIndex?'acTive':'ffEr'" @click="jianIndex(index)">{{item.name}}</li>
			</ul>
			<view class="btnShu">
				<view class="shuCZ" @click="CZer()">
					重置
				</view>
				<view class="shuQD" @click="queer()">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script >
export default{
	data(){
		return{
			huikuan:false,
			jianbao:false,
			list:[],
			years:[],
			arr:[
				{
					id:1,
					name:"客户管理",
					img:"../../static/Ln/1.png",
					path:"/pages/CustomerManagementLn/CustomerManagementLn"
				},
				{
					id:2,
					name:"销售线索",
					img:"../../static/Ln/2.png",
					path:"/pages/crmXiansuo/crmXiansuo"
				},
				{
					id:3,
					name:"商机管理",
					img:"../../static/Ln/3.png",
					path:"/pages/crmShop/crmShop"
				},
				{
					id:4,
					name:"订单管理",
					img:"../../static/Ln/4.png",
					path:"/pages/crmDingdan/crmDingdan"
				},
				{
					id:5,
					name:"联系人",
					img:"../../static/Ln/5.png",
					path:"/pages/ContactManagementLn/ContactManagementLn"
				},
				{
					id:6,
					name:"统计报表",
					img:"../../static/Ln/6.png",
					path:"/pages/crmTongJi/crmTongJi"
				},
				{
					id:7,
					name:"财务管理",
					img:"../../static/Ln/7.png",
					path:"/pages/remCaiWu/remCaiWu"
				},
				{
					id:8,
					name:"跟进记录",
					img:"../../static/Ln/8.png",
					path:"/pages/crmGenjin/crmGenjin"
				},
				{
					id:9,
					name:"产品列表",
					img:"../../static/Ln/9.png",
					path:"/pages/LNProductList/LNProductList"
				},
				{
					id:10,
					name:"营销活动",
					img:"../../static/Ln/10.png",
					path:"/pages/crmHuodong/crmHuodong"
				},
				{
					id:11,
					name:"竞争对手",
					img:"../../static/Ln/11.png",
					path:"/pages/crmJinzheng/crmJinzheng"
				},
				{
					id:12,
					name:"业绩目标",
					img:"../../static/Ln/12.png",
					path:"/pages/LNKPI/LNKPI"
				},
			],
			
			huiK:[
				{
					id:0,
					name:"公司简报"
				},			
				{
					id:0,
					name:"公司简报"
				},			
				{
					id:0,
					name:"公司简报"
				},
			],
			huiIndex:0,
			time:[
				{
					id:0,
					name:"今年"
				},	{
					id:1,
					name:"本季度"
				},	{
					id:2,
					name:"上季度"
				},	{
					id:3,
					name:"本月"
				},	{
					id:4,
					name:"上月"
				},	{
					id:5,
					name:"本周"
				},	{
					id:6,
					name:"上周"
				},	{
					id:7,
					name:"昨天"
				},	{
					id:8,
					name:"今天"
				},
			],
			timeIndex:0,
			timer:[
				{
					id:0,
					name:"今年"
				},	{
					id:1,
					name:"本季度"
				},	{
					id:2,
					name:"上季度"
				},	{
					id:3,
					name:"本月"
				},	{
					id:4,
					name:"上月"
				},	{
					id:5,
					name:"本周"
				},	{
					id:6,
					name:"上周"
				},	{
					id:7,
					name:"昨天"
				},	{
					id:8,
					name:"今天"
				},
			],
			timerIndex:0
		}
	},
	created() {
	  uni.request({
	    url: "http://127.0.0.1:3000/kehu/getAll", //接口地址
	    method: "POST",
	    success: (res) => {
	      this.list = res.data.data;
	    },
	  });  
	  uni.request({
	    url: "http://127.0.0.1:3000/year", //接口地址
	    method: "POST",
	    success: (res) => {
	      this.years = res.data.data;
	      console.log(  res.data.data,this.years,"year");
	    },
	  });
	},
	methods:{
		go(item){
			uni.navigateTo({
			  url:
			    "/pages/crmDetail/crmDetail?item=" +
			    JSON.stringify(item),
			});
		},
		too(path){
			uni.navigateTo({
				url:path
			});
		},
		shaiX(){
			this.huikuan=true
		},
		cuo(){
			this.huikuan=false
		},
		gaiIndex(index){
			this.huiIndex=index
		},
		gaiTIndex(index){
			this.timeIndex=index
		},
		CZ(){
			this.huiIndex=0,
			this.timeIndex=0
		},	
		CZer(){
			this.timerIndex=0
		},
		que(){
			this.huikuan=false,
			this.huiIndex=0,
			this.timeIndex=0
		},
		queer(){
			this.jianbao=false,
			this.timerIndex=0
		},
		jianIndex(index){
			this.timerIndex=index
		},
		shai(){
			this.jianbao=true
		}
	}
}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
.LN{
	padding: 0 40rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	.CRM{
		display: flex;
		width: 100%;
		align-items: flex-end;
		height: 170rpx;
	
		// padding: 0 40rpx;
		font-weight: 700;
		position: fixed;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		left: 0;
		top: 0;
			background-color: white;
	}
	.gard{
		background-color: white;
		margin-top: 200rpx;
		#ul{
			display: flex;
			margin-top: 40rpx;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 40rpx;
			box-sizing: border-box;
			box-shadow: 1px 1px 5px #ccc;
			border-radius: 20rpx;
			.li{
				width: 25%;
				margin-bottom: 70rpx;
				.on{
					background-color: #e4e4e4;
					height: 100rpx;
					display: flex;
					align-items: center;
					width: 100rpx;
					margin: 0 auto;
					justify-content: center;
					border-radius: 50%;
					.tu{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.un{
					margin-top: 30rpx;
					text-align: center;
					font-size: 28rpx;
				}
			}
		}
	}
	.hui{
		padding: 40rpx;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ccc;
		border-radius: 20rpx;
		margin-top: 40rpx;
		.top{
			display: flex;
			justify-content: space-between;
			.font{
				font-weight: 700;
				color: #666666;
			}
			.shai{
				color: #1b83fe;
			}
		}
		.Udata{
			.uler{
				.lier{
					display: flex;
					height: 120rpx;
					align-items: center;
					border-bottom: 1px solid #eee;
					justify-content: space-between;
					font-size: 25rpx;
					color: gray;
					padding: 0 20rpx;
					#id{
						background-color: #ccc;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 50rpx;
						color: white;
					}
					#price{
						width: 200rpx;
						text-align: center;
					}
				}
			}
		}
	}
	.shu{
		padding: 40rpx;
		box-sizing: border-box;
		box-shadow: 1px 1px 5px #ccc;
		border-radius: 20rpx;
		margin-top: 40rpx;

		.top{
			display: flex;
			justify-content: space-between;
			.font{
				font-weight: 700;
				color: #666666;
			}
			.shai{
				color: #1b83fe;
			}
		}
		.uData{
			.Dyear{
				display: flex;
				flex-wrap: wrap;
				.years{
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;
					height: 180rpx;
					.title{
						font-size: 26rpx;
						color: gray;
					}
					.num{
						font-size: 38rpx;
					}
				}
			}
		}
	}
	
	
}
.shuShai{
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		background-color: rgba(0, 0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		.shuCon{
			height: 100%;
			background-color: #ffffff;
			width: 80%;
			padding: 0 40rpx;
			box-sizing: border-box;
			.shuTop{
				display: flex;
				margin-top: 80rpx;
				justify-content: space-between;
				margin-bottom: 40rpx;
				.her{
					font-weight: 700;
					color: #666666;
				}
			}
			.fa{
				height: 80rpx;
				display: flex;
				align-items: flex-end;
				padding: 40rpx 0;
				box-sizing: border-box;
				font-size: 25rpx;
				color: gray;
			}
			.fanwei{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.ffEr{
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #ccc;
					height: 60rpx;
					font-size: 25rpx;
					margin-bottom: 40rpx;
					color: gray;
				}
				.acTive{
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #1b83fe;
					height: 60rpx;
					background-color: #f8fbff;
					font-size: 25rpx;
					color: #1b83fe;
				}
			}
			.btnShu{
				width: 100%;
				display: flex;
				margin-top: 100rpx;
				.shuCZ{
					width: 50%;
					border: 1px solid #ccc;
					color: #1b83fe;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.shuQD{
					width: 50%;
					background-color: #1b83fe;
					color: white;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>

